<template>
    <van-pull-refresh
            v-model="loading"
            success-text="刷新成功"
            @refresh="onRefresh"
    >


        <van-nav-bar
                title="美食详情"
                left-text="返回"
                right-text="分享"
                left-arrow
                @click-left="onClickLeft"
                @click-right="showShare = true"
        >
        </van-nav-bar>
        <!--分享-->
        <van-share-sheet
                v-model:show="showShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
        />
        <!--图片-->
        <van-image
                width="100%"
                height="300"
                :src="foods.imgurl"
        />
<!--点赞-->
        <div>
            <div>
                <span style="font-size: 25px; margin-right: 14rem">{{foods.name}}</span><br>
               <span>评分：{{foods.lovenum}} <van-rate style="font-size: 15px; margin-right: 8rem" v-model="foods.lovenum" :count="6" readonly allow-half/></span> <br>
                <span style="margin-right: 18rem">浏览量{{foods.looknum}}</span>
                <span>上架时间{{foods.ctime}}</span>
                <span style="color: #F2270C;margin-right: 15rem">
                    ￥<span style="margin: 2rem 0; font-size: 30px;">{{foods.price}}</span>
                </span>
                <!--点赞-->
                <span style="float: right">
                    <van-icon name="thumb-circle-o"
                              size="30"
                              @click="likeClick"
                              :color="num?'#F1050A':''" />
                </span><br>

                <span style="margin-right: 10rem">
                   <span> 地址: {{foods.site}}</span><van-icon name="guide-o" />
                    <button @click="map(foods.name)" style="float: right"><van-icon  name="share" />去这里</button>
                </span>
            </div>
        </div>

        <van-divider
                :style="{ color: '#1989fa', borderColor: '#1989fa',fontSize:'1.3rem', padding: '16px 16px' }"
        >
            相关评论
        </van-divider>




        <div class="comments" style="margin-bottom: 6rem">

            <div class="comment-wrap">
                <div class="photo">
                    <div class="avatar">
                        <van-image
                                src="https://img0.baidu.com/it/u=1351789974,2391329705&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                        />
                    </div>
                </div>
                <div class="comment-block">
                    <form action="">
                        <textarea name="" id="" cols="30" rows="3" placeholder="Say somthing..."></textarea>
                    </form>
                </div>
            </div>

            <div class="comment-wrap" v-for="t in talk">
                <div class="photo">
                    <div class="avatar">
                        <van-image
                                :src="t.imgurl"
                        />
                        <div class="comment-date">{{t.name}}</div>
                    </div>
                </div>
                <div class="comment-block">
                    <p class="comment-text">{{t.note}}</p>
                    <div class="bottom-comment">
                        <div class="comment-date">{{t.ctime}}</div>
                        <ul class="comment-actions">
                            <li class="complain"><button @click="bu(t.id)" style="border: none"><van-icon id="love" name="like-o" />{{t.likenum}}</button></li>
                            <li class="reply">
                                <van-button @click="but()" style="height: 35px;">回复</van-button>
                                <van-dialog
                                        v-model:show="show"
                                        :title="t.name"
                                        show-cancel-button
                                        :before-close="chargeBtn"
                                >
                                    <van-field
                                            v-model="message"
                                            rows="3"
                                            label="回复"
                                            type="textarea"
                                            placeholder="请输入回复"
                                    >
                                    </van-field>
                                </van-dialog>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <van-submit-bar :price="foods.price*100" button-text="立即购买" @submit="onSubmit" >
            <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="15rem" round type="primary" @click="char()">联系店家</van-button>
        </van-submit-bar>

    </van-pull-refresh>
</template>



<script>
    import { ref } from 'vue';
    import { Toast } from 'vant';

    export default {
        name: 'FoodView',
        data() {
            return {
                num: '',//点赞数
                isLike: false,
                foods: {},
                value:5,
                talk:[],
                n:1,
                show: false,
                message: '',
                foodid:this.$route.query.id,
            }
        },
        mounted() {

            var url="/api/foods/detail.do";

            this.axios.get(url+"?id="+this.foodid).then(res=>{
                if(res.data.code==200){
                    //成功
                    this.foods=res.data.data;
                }else{
                    //失败
                    Toast('亲，网络异常！');
                }

            });
            /*评论*/
            this.axios.get("/api/talk/list.do?fid="+this.foodid).then(res=>{
                if(res.data.code==200){
                    //成功
                    this.talk=res.data.data;
                }else{
                    //失败
                    Toast('亲，网络异常！');
                }

            })
        },

        methods: {
            onClickLeft(){
                history.back();
            },
            likeClick() {
                this.isLike = true
                this.num++
                /*请求评价值加一*/
            },
            /*地图*/
            map(name){
                this.$router.push({path:"/map",query:{name:name}});
            },
            /*联系店铺*/
            char(){
                this.$router.push({path:"/chat",query:{}});
            },
            onSubmit(){

                this.axios.get("/api/foods/order.do?name="+this.foods.name+"&price="+this.foods.price).then(res=>{
                        if(res.data.code==200){
                            //成功
                            Toast("下单成功，请支付....");
                            this.$store.state.foodorder.price=this.foods.price;
                            this.$store.state.foodorder.oid=res.data.data;
                            this.$store.state.foodorder.name=this.foods.name;
                            this.$router.push({path:"/foodPay",query:{}});
                        }else{
                            alert("订单生成失败！")
                        }
                });
            },
            bu(id){

                if(this.n==0){
                    document.getElementById("love").style.background="white";
                    this.axios.get("/api/talk/lovenum.do?lovenum=-1&id="+id).then(res=> {
                        if (res.data.code == 200) {
                            this.n++;
                            this.axios.get("/api/talk/list.do?fid="+this.foodid).then(res=>{
                                if(res.data.code==200){
                                    //成功
                                    this.talk=res.data.data;
                                }else{
                                    //失败
                                    Toast('亲，网络异常！');
                                }
                            });
                        }
                    });

                }else{
                  document.getElementById("love").style.background="red";
                    this.axios.get("/api/talk/lovenum.do?lovenum=1&id="+id).then(res=> {
                        if (res.data.code == 200) {
                            this.n--;
                            this.axios.get("/api/talk/list.do?fid="+this.foodid).then(res=>{
                                if(res.data.code==200){
                                    //成功
                                    this.talk=res.data.data;
                                }else{
                                    //失败
                                    Toast('亲，网络异常！');
                                }
                            });
                        }
                    });

                }
            },
            but(){
                    this.show = true;
            },
            chargeBtn(action) {//确认or取消
                if (action === 'cancel') {//取消按钮
                    this.show = false;
                    Toast("已取消")
                } else if (action === 'confirm') {//确定按钮
                    //向后端传值并关闭dialog弹出框
                    this.show = false;
                    Toast("回复成功")
                };
                this.message='';

            }
        },
        setup() {
            /*刷新*/
            const count = ref(0);
            const loading = ref(false);
            const onRefresh = () => {
                setTimeout(() => {
                    Toast('刷新成功');
                    loading.value = false;
                    count.value++;
                }, 1000);
            };

            /*导航*/

            const onClickRight = () => onSelect(options);

            /*分享*/
            const showShare = ref(false);
            const options = [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
            ];

            const onSelect = (option) => {
                Toast(option.name);
                showShare.value = false;
            };

            const value = ref(3);
            return {
                loading,
                onRefresh,
                onClickRight,
                options,
                onSelect,
                showShare,

                value,
            };
        },

    }
</script>

<style scoped>
   ul{
        list-style:none;
        margin-left: 60px;
        padding: 10px;
        width: auto;
    }
   ul li {
        float:left;
    }


   body {
       background-color: #f0f2fa;
       font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
       color: #555f77;
       -webkit-font-smoothing: antialiased;
   }
   input,
   textarea {
       outline: none;
       border: none;
       display: block;
       margin: 0;
       padding: 0;
       -webkit-font-smoothing: antialiased;
       font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
       font-size: 1rem;
       color: #555f77;
   }
   input::-webkit-input-placeholder,
   textarea::-webkit-input-placeholder {
       color: #ced2db;
   }
   input::-moz-placeholder,
   textarea::-moz-placeholder {
       color: #ced2db;
   }
   input:-moz-placeholder,
   textarea:-moz-placeholder {
       color: #ced2db;
   }
   input:-ms-input-placeholder,
   textarea:-ms-input-placeholder {
       color: #ced2db;
   }
   p {
       line-height: 1.3125rem;
   }
   .comments {
       margin: 2.5rem auto 0;
       max-width: 60.75rem;
       padding: 0 1.25rem;
   }
   .comment-wrap {
       margin-bottom: 1.25rem;
       display: table;
       width: 100%;
       min-height: 5.3125rem;
   }
   .photo {
       padding-top: 0.625rem;
       display: table-cell;
       width: 3.5rem;
   }
   .photo .avatar {
       height: 2.25rem;
       width: 2.25rem;
       border-radius: 50%;
       background-size: contain;
   }
   .comment-block {
       padding: 1rem;
       background-color: #fff;
       display: table-cell;
       vertical-align: top;
       border-radius: 0.1875rem;
       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
   }
   .comment-block textarea {
       width: 100%;
       max-width: 100%;
   }
   .comment-text {
       margin-bottom: 1.25rem;
   }
   .bottom-comment {
       color: #acb4c2;
       font-size: 0.875rem;
   }
   .comment-date {
       float: left;
   }
   .comment-actions {
       float: right;
   }
   .comment-actions li {
       display: inline;
   }
   .comment-actions li.complain {
       padding-right: 0.625rem;
       border-right: 1px solid #e1e5eb;
   }
   .comment-actions li.reply {
       padding-left: 0.625rem;
   }
</style>